
export default {
  name: "barEchart",
  props: ["params"],
  data :function () {
    return({
      width: 100,
      height: 100,
      barEchartId:"barEchartsId"+parseInt(new Date().getTime()*Math.random())
    })
  },
  mounted: function () {
    let _this = this;
    let width = document.getElementById(_this.barEchartId).parentNode.offsetWidth;
    let height = document.getElementById(_this.barEchartId).parentNode.offsetHeight;
    _this.width = parseFloat(width);
    _this.height = parseFloat(height);
    setTimeout(function () {
      _this.drawEchartsFunc();
    },0);
  },
  methods:{
    set0ptions: function (tmpParams) {
      let _this = this;
      let params = tmpParams;
      let hasDataZoom = false;//是否有滚动条
      let series = [],xData =[];
      for(let xLengtth=0;xLengtth<tmpParams.xData.length;xLengtth++){
        xData.push({
          value:tmpParams.xData[xLengtth],
          textStyle: {
            color:"#fff",
            fontSize:18
          }
        })
      }
      for(let pLength = 0;pLength<tmpParams.yData.length;pLength++){
        let item;
        item = {
          type: 'bar',
          barWidth: '50%',
          itemStyle: {
            normal: {
              color: tmpParams.yData[pLength].color?tmpParams.yData[pLength].color:"#ff0000",
              label: {
                show: true,
                color: "#fff",//控制柱形图里面的颜色
                position: 'top',
                formatter: '{c}'
              }
            }
          },
          data:tmpParams.yData[pLength].data
        };
        if(tmpParams.yData[pLength].data.length>15){
          hasDataZoom = true;
        }
        series.push(item)
      }
      let option = {
        title: {
          text: tmpParams.title,
          x: 'center',
          textStyle: {
            color:"#fff",
            fontWeight:"lighter",
            align:"center",
            fontSize:32
          }
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color:"#fff",
            fontSize:22
          },
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          enterable: true,
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: hasDataZoom?'20%':"0%",
          top: hasDataZoom?"10%":'20%',
          containLabel: true,
          show: false,//去除外层网格线
          backgroundColor: "#1f173e",
        },
        xAxis: [{
          show: true,
          type: 'category',
          axisPointer: {
            triggerTooltip: false
          },
          boundaryGap: ['20%', '20%'],
          axisTick: {
            show: false,
            alignWithLabel:true
          },
          axisLabel:{
            color:"#ece8f5"
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color:'#393858',//坐标轴的样式
              width:'1'
            }
          },
          splitLine: {
            show: false,//添加x坐标网格线
            lineStyle: {
              type: "dashed",
              color:'#393858',//坐标轴的样式
            }
          },//展示虚线网格线
          data: xData
        }],
        yAxis: {
          show: true,
          type: 'value',
          name:"",
          nameGap:30,
          nameTextStyle:{
            color:"#fff",
            align:"left",
            fontSize:22,
          },
          nameLocation:"center",
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLabel:{
            color:"#ece8f5",
            textStyle: {
              fontSize: 22
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color:'#393858',//坐标轴的样式
              width:'1',
            }
          },
          splitLine: {
            show: true,//添加要y坐标网格线
            lineStyle: {
              type: "solid",
              color:'#393858',//坐标轴的样式
            }
          },//展示虚线网格线
        },
        series: series
      };
      if(hasDataZoom){
        option.dataZoom = [
          {//这个是鼠标拖动
            show: true,
            start: 0,
            end: hasDataZoom?30:100,
            minSpan:10,
            filterMode:"empty",
            borderColor:"#393858",//边框颜色
            fillerColor:"#393858"
          },
          {//这个是鼠标缩放事件
            type: 'inside',
            start: 94,
            end: 100,
            minSpan:10,
            filterMode:"empty",
            borderColor:"#393858",//边框颜色
          }
        ];
      }
      return option;
    },
    drawEchartsFunc: function () {
      let _this = this;
      let params = _this.params;
      let option = _this.set0ptions(params);
      let echartsId = document.getElementById(_this.barEchartId);
      let myEcharts = _this.$echarts.init(echartsId);
      myEcharts.setOption(option);
    }
  }
}
